<template>
	<view class="app">
		<view class="wd-relative">
			<view class="wd-absolute wd-top-0 wd-left-0 wd-z-8" style="pointer-events:none;">
				<phone-case-mask :width='canvas.width' :height='canvas.height'
					:phone-case-id="phoneCaseId"></phone-case-mask>
			</view>
			<view class="canvas" id='fabric'></view>
			<view class="canvas-operate">
				<view class="wd-truncate wd-rounded-60r" style=" background-color: #dcdcdc;">
					<view class="wd-flex-center wd-items-center wd-justify-around wd-p-20r">
						<view class="wd-px-40r" @click="canvasStateManager.undo()">
							<u-icon name="custom-icon-chexiao" custom-prefix="custom-icon"></u-icon>
						</view>
						<view class="wd-px-40r" @click="canvasStateManager.clear()">
							<u-icon name="custom-icon-qingkong" custom-prefix="custom-icon"></u-icon>
						</view>
						<view class="wd-px-40r" @click="canvasStateManager.redo()">
							<u-icon name="custom-icon-huifu" custom-prefix="custom-icon"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<phone-case-creative-space :canvas="canvas"></phone-case-creative-space>
		
		<fabric-image-operate-popup ref="fabricImageOperatePopup" :canvas="canvas"></fabric-image-operate-popup>
		<fabric-text-operate-popup ref="fabricTextOperatePopup" :canvas="canvas"></fabric-text-operate-popup>
	</view>
</template>

<script module="ctx" lang="renderjs">
	import fabirc from 'fabric'
	import fabricImageOperatePopup from '@/components/fabric/image-operate-popup.vue'
	import fabricTextOperatePopup from '@/components/fabric/text-operate-popup.vue'
	
	import phoneCaseCreativeSpace from '@/components/phone-case/creative-space.vue'
	import phoneCaseMask from '@/components/phone-case/mask.vue'

	import initControls from '@/lib/fabric/controls/initControls'
	import initAligningGuidelines from '@/lib/fabric/guidelines/initAligningGuidelines'
	import initCenteringGuidelines from '@/lib/fabric/guidelines/initCenteringGuidelines'
	
	import CanvasStateManager from '@/lib/fabric/manager/CanvasStateManager'
	export default {
		components: {
			fabricImageOperatePopup,
			fabricTextOperatePopup,
			phoneCaseCreativeSpace,
			phoneCaseMask,
		},
		data() {
			// 页面数据变量
			return {
				canvas: {},
				canvasStateManager: {},
				phoneCaseId: '123',
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			vk = uni.vk;
			this.options = options;
			this.init(options);
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {
			this.createCanvas();
		},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {

		},
		// 函数
		methods: {
			init() {},
			//生成画布
			createCanvas() {
				let container = document.getElementById('fabric');
				let canvas = document.createElement('canvas');
				canvas.setAttribute("id", "canvas");
				container.appendChild(canvas);

				//初始化
				this.canvas = new fabric.Canvas('canvas', {
					//centeredScaling: true,
					preserveObjectStacking: true,
				});

				//设置宽高
				let systemInfo = uni.getSystemInfoSync();
				this.canvas.setWidth(systemInfo.windowWidth);
				this.canvas.setHeight(systemInfo.windowHeight * 0.73);
				
				//控制样式
				initControls(this.canvas);

				//辅助线
				initAligningGuidelines(this.canvas);
				initCenteringGuidelines(this.canvas);
				
				//画布状态管理，回退，恢复，清空
				this.canvasStateManager = new CanvasStateManager(this.canvas);
				
				//监听
				this.canvas.on("mouse:down", this._onCanvasMouseDown)
				
				//渲染
				this.canvas.renderAll();
			},
			
			//鼠标按下
			_onCanvasMouseDown() {
				const activeObj = this.canvas.getActiveObject();
				if (activeObj) {
					if (activeObj.type == 'image') {
						this.$refs.fabricTextOperatePopup.close();
						this.$refs.fabricImageOperatePopup.show();
					}
					if (activeObj.type == 'i-text' || activeObj.type == 'text' || activeObj.type ==
						'textbox') {
						this.$refs.fabricImageOperatePopup.close();
						this.$refs.fabricTextOperatePopup.show();
					}
				} else {
					this.$refs.fabricImageOperatePopup.close();
					this.$refs.fabricTextOperatePopup.close();
				}
			},
		},
		// 监听器
		watch: {

		},
		// 计算属性
		computed: {

		}
	}
</script>
<style lang="scss" scoped>
	.app {
		background-color: #f5f5f5;

		.canvas-operate {
			position: absolute;
			width: 350rpx;
			left: 0;
			right: 0;
			bottom: 20rpx;
			margin: auto;
			z-index: 9;
		}
	}
</style>